<template>
  <el-scrollbar height="auto">
    <div class="w content">
          <div style="text-align: center;margin-top: 10px">
            <el-row :gutter="10">
              <el-col :span="4" v-for="item in tableData">
                <div style="margin-top: 20px">
                  <div style="position: relative">
                    <el-image :src="BASE_URL + item.poster"
                              style="width: 80%;height: auto;margin: 0 auto;position: relative;z-index: 1"
                              alt="Film poster"/>
                    <div style="position: absolute;bottom: 0;left: 50%; transform: translateX(-50%);z-index: 2;
                        width: 80%;height: 100%;
                       background: linear-gradient(360deg, #0f1827 8%, rgba(15, 24, 39, 0) 70%);   "
                         @click="watchFilmById(item.filmId)">
                      <p style="position: absolute;bottom: 0;left: 50%;width: 80%;
                              transform: translateX(-50%);z-index: 3;color: #FFFFFF;
                              font-size: 16px;font-weight: bold;">{{ item.filmName }} </p>
                    </div>
                  </div>
                  <el-button @click="watchFilmById(item.filmId)"
                             style="width: 80%;border-radius: 0 ; border: #671523;
                                background-color: #671523;color: #FFFFFF">观 看
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
import router from "@/router";

let subjectId = new URLSearchParams(window.location.search).get('id');
const tableData = ref([]);
const select = () => {
  let data = qs.stringify({
    subjectId: subjectId
  });
  axios.get(BASE_URL + '/v1/filmSubject/select?' + data)
      .then((response) => {
        if (response.data.code === 2000) {
          tableData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
}
onMounted(() => {
  select();
})
const watchFilmById = (filmId) => {
  router.push('/details?filmId=' + filmId)
}
</script>

<style scoped>
.content {
  margin-top: 20px;
  height: 1200px;
}

</style>